<template>
  <div style="margin: 20px">
    <div style="display: flex; justify-content: space-between; font-size: 16px; border-bottom: 1px solid #ccc; padding-bottom: 5px">
      <div>
        <span class="el-icon-tickets" style="margin-right: 15px"></span>
        <span>告警记录</span>
      </div>
    </div>

    <div style="margin-top: 5px">
      <el-form ref="gridHeadLayout" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="formInline.configName"
            size="mini"
            placeholder="请输入告警名称">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formInline.equipmentName"
            size="mini"
            placeholder="请输入设备名称">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formInline.pointName"
            size="mini"
            placeholder="请输入点位名称">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.status" size="small" style="width: 100%" placeholder="请选择记录状态">
            <el-option
              v-for="item in recordDict"
              :key="item.value"
              :label="item.label"
              :value="item.value * 1">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="top-button">
          <el-button size="mini" @click="handleSearch" icon="el-icon-search"></el-button>
          <el-button size="mini" @click="handleEmpty" icon="el-icon-refresh-right"></el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <div style="max-height: calc(100vh - 285px);height: calc(100vh - 285px); overflow: auto;">
        <el-row v-if="data.length" style="margin-top: 20px">
          <div class="warning-card">
            <el-col :span="24" v-for="(item, index) in data" :key="index">
              <el-card shadow="hover" :class="{'record-success': item.status == 1, 'record-danger': item.status == 0}" style="position: relative;font-size: 14px; padding-bottom: 10px; margin-right: 10px;margin-bottom: 10px;">
                <div style="margin-bottom: 10px;">
                  <div style="padding: 20px 20px 5px 20px">
                    <div class="point-head" style="position: relative;font-size: 18px; font-weight: bold; margin-bottom: 10px;">
                      {{ item.configName }}
                    </div>
                    <div class="point-content" style="margin-bottom: 10px">
                      <div style="margin: 16px 6px 0 0px;">
                        <el-row>
                          <el-col :span="6">
                            <span style="color: #646a73">设备名称：</span>
                            <span style="color: #1677ff;">{{ item.equipmentName }}</span>
                          </el-col>
                          <el-col :span="6">
                            <span style="color: #646a73">点位名称：</span>
                            <span style="color: #1677ff;">{{ item.pointName }}</span>
                          </el-col>
                          <el-col :span="6">
                            <span style="color: #646a73">告警时间：</span>
                            <span style="color: #1677ff;">{{ parseTime(item.createTime) }}</span>
                          </el-col>
                        </el-row>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="item.status == 1" style="position:absolute; top: -10px; right: -15px;font-size: 100px;z-index: 0;">
                  <svg-icon icon-class="processed" class-name="processed-icon" style="position:absolute; top: 5px; right: 30px;margin-top: 10px;margin-left: 30px;text-align: center;" />
                </div>
                <div v-if="item.status == 0" style="position:absolute; top: -10px; right: -15px;font-size: 100px;z-index: 0;">
                  <svg-icon icon-class="untreated" class-name="untreated-icon" style="position:absolute; top: 5px; right: 30px;margin-top: 10px;margin-left: 30px;text-align: center;" />
                </div>
              </el-card>
            </el-col>
          </div>
        </el-row>
      </div>

      <el-pagination
        background
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        :page-size="page.pageSize"
        :pager-count="5"
        @size-change="changeSize"
        @current-change="changeCurrent"
        style="float: right; margin: 20px 0;">
      </el-pagination>
    </div>
  </div>

</template>

<script>
import {page as getPage} from "@/api/warning/warning-record";

export default {
  name: "record",
  computed: {
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  data() {
    return {
      tableLoading: false,
      data: [],
      formInline: {},
      recordDict: [], // 告警记录状态字典
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
    }
  },
  mounted() {
    this.onLoad(this.page, {});
    this.recordDict = this.$store.state.dict.dictDatas.record_status
  },
  methods: {
    handleSearch () {
      this.page.currentPage = 1
      this.onLoad(this.page, this.formInline)
    },
    handleEmpty () {
      this.formInline = {}
      this.onLoad(this.page)
    },
    changeCurrent (val) {
      this.page.currentPage = val
      this.onLoad(this.page, {})
    },
    changeSize (val) {
      this.page.pageSize = val
      this.onLoad(this.page, {})
    },
    onLoad(page, params = {}) {
      this.page = page;
      this.tableLoading = true;
      getPage(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.formInline)
      ).then(res => {
        const data = res.data;
        this.page.total = data.total;
        this.data = data.records;
        this.tableLoading = false;
      });
    },
  }
};
</script>
<style scoped>
.record-button ::v-deep .el-button {
  width: 95%;
}

.warning-card ::v-deep .el-card__body {
  padding: 0 !important;
}

.warning-card ::v-deep .el-divider--horizontal {
  margin: 0;
}

.top-button ::v-deep .el-button + .el-button {
  margin-left: 0;
}

.record-danger {
  background: linear-gradient(40deg, #fff, #fef0f0, #fde2e2);
}

.record-success {
  background: linear-gradient(40deg, #fff, #f0f9ed, #c2e7af);
}
</style>
